<div class="card">
  <div class="card-header">
    {{ pageTitle }}
    <a
      class="btn btn-primary"
      style="float: right;"
      routerLinkActive="active"
      [routerLink]="['/products/add']"
    >
      Add Product
    </a>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-2">Filter by:</div>
      <div class="col-md-4">
        <input type="text" [(ngModel)]="listFilter" />
      </div>
    </div>
    <div class="row" *ngIf="listFilter">
      <div class="col-md-6">
        <h4>Filtered by: {{ listFilter }}</h4>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table" *ngIf="products && products.length">
        <thead>
          <tr>
            <th>
              <button class="btn btn-primary" (click)="toggleImage()">
                {{ showImage ? "Hide" : "Show" }} Image
              </button>
            </th>
            <th>Product</th>
            <th>Code</th>
            <th>Description</th>
            <th>Price</th>
            <th>5 Star Rating</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let product of filteredProducts">
            <td>
              <img
                *ngIf="showImage"
                [src]="product.imageUrl || '/assets/images/logo.png'"
                [title]="product.name"
                [style.width.px]="imageWidth"
                [style.margin.px]="imageMargin"
              />
            </td>
            <td>
              <a [routerLink]="['/products', product.id]">
                {{ product.name }}
              </a>
            </td>
            <td>{{ product.code | uppercase }}</td>
            <td>{{ product.description }}</td>
            <td>{{ product.price || 5 | currency: "USD":"symbol" }}</td>
            <td>
              <pm-star
                [rating]="product.starRating || 4"
                (ratingClicked)="onRatingClicked($event)"
              >
              </pm-star>
            </td>
            <td>
              <a
                class="btn btn-primary"
                routerLinkActive="active"
                [routerLink]="['/products/edit', product.id]"
              >
                Edit
              </a>
              &nbsp;
              <button
                type="button"
                class="btn btn-primary btn-secondary"
                (click)="viewAuditLogs(template, product.id)"
              >
                View Audit Logs
              </button>
              &nbsp;
              <app-delete-product
                [product]="product"
                (confirmed)="onDeleteConfirmed($event)"
              ></app-delete-product>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
  Error: {{ errorMessage }}
</div>

<ng-template #template>
  <div class="modal-body text-center">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Date Time</th>
            <th>User Name</th>
            <th>Action</th>
            <th>Code</th>
            <th>Name</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let auditLog of auditLogs">
            <td>
              {{ auditLog.createdDateTime | date: "dd/MM/yyyy hh:mm:ss" }}
            </td>
            <td>{{ auditLog.userName }}</td>
            <td>{{ auditLog.action }}</td>
            <td [style.color]="auditLog.highLight.code ? 'red' : ''">
              {{ auditLog.data.code }}
            </td>
            <td [style.color]="auditLog.highLight.name ? 'red' : ''">
              {{ auditLog.data.name }}
            </td>
            <td [style.color]="auditLog.highLight.description ? 'red' : ''">
              {{ auditLog.data.description }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-template>
